<template>
  <div class="backgImage">
    <!-- 点位信息 -->
    <div class="div1">
      <TitleView
        title="点位信息"
        :titlemore="false"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="div1_d pl32 pr32">
        <Dianwei :data="DataD"></Dianwei>
      </div>
    </div>
    <!-- 设备异常 -->
    <div class="div2">
      <TitleView
        title="异常事件统计"
        :titlemore="false"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="div1_d pl32 pr32">
        <Device :data="DataDevice"></Device>
      </div>
    </div>
    <!-- 区域报警显示 -->
    <div class="div3">
      <TitleView
        title="取气还气"
        :titlemore="false"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="div1_d pl32 pr32">
        <Region :data="DataRegion"></Region>
      </div>
    </div>
  </div>
</template>

<script>
import {
  threeD_left1,
  threeD_left2,
  threeD_left3,
  threeD_left4,
} from "@/request/api.js";

import Dianwei from "./components/Dianwei.vue";
import Device from "./components/Device.vue";
import Region from "./components/Region.vue";
import DataDImg1 from "@/assets/ThreeD/组 109.png";
import DataDImg2 from "@/assets/ThreeD/组 109(1).png";

export default {
  components: {
    Dianwei,
    Device,
    Region,
  },
  data() {
    return {
      DataDevice: [],
      DataD: [
        {
          src: DataDImg1,
          title: "管道",
          number: "122",
          unit: "点位总数统计(个)",
        },
        {
          src: DataDImg2,
          title: "仪表",
          number: "22",
          unit: "DCS(个)",
        },
        {
          src: DataDImg2,
          title: "安全阀",
          number: "12",
          unit: "FGS(个)",
        },
        {
          src: DataDImg2,
          title: "数据名称",
          number: "32",
          unit: "SIS(个)",
        },
      ],
      DataRegion: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    titleMoreClick(msg) {
      console.log(msg);
    },
    getData() {
      threeD_left1().then((res) => {
        console.log("区域报警显示:", res);
        // this.DataP.number = res.data.toString()
      });
      threeD_left2().then((res) => {
        console.log("设备异常:", res);
        this.DataDevice = res.data.reverse();
      });
      threeD_left3().then((res) => {
        console.log("点位信息:", res);
        this.DataD[0].number = res.data["ALL"];
        this.DataD[1].number = res.data["DCS"];
        this.DataD[2].number = res.data["FGS"];
        this.DataD[3].number = res.data["SIS"];
      });
      threeD_left4().then((res) => {
        console.log("取气还气", res);
        res.data.forEach((element) => {
          if (element.NAME == "FI010101") {
            this.DataRegion[0] = element.pointValue;
          }
          if (element.NAME == "FI010102") {
            this.DataRegion[1] = element.pointValue;
          }
          if (element.NAME == "FI010201") {
            this.DataRegion[2] = element.pointValue;
          }
          if (element.NAME == "FI010202") {
            this.DataRegion[3] = element.pointValue;
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.div1 {
  height: 277px;

  .div1_d {
    margin-top: 20px;
  }
}

.div2 {
  height: 343px;

  .div1_d {
    margin-top: 20px;
  }
}

.div3 {
  .div1_d {
  }
}
</style>
